@media screen and (min-width: 450px) {
  .chart_warp {
    margin-bottom: -100px !important;
  }
  .content_box {
    height: 250px;
    overflow: hidden;
  }
  .chart {
    margin-top: -80px !important;
    margin-bottom: -100px !important;
  }
}
@media screen and (max-width: 450px) {
  .chart_warp {
    margin-bottom: calc(80vw - 100vw + 12vw) ! important;
    margin-top: calc(80vw - 100vw + 10vw) !important;
    height: calc(100vw - 40px) !important;
  }
  .content_box {
    height: calc(50vw + 40px) !important;
    overflow: hidden;
  }
}
.content {
  width: 100%;
  height: 100%;
  .chart_warp {
    width: 100%;
    height: 100vw;
    max-height: 400px;
    display: flex;
    justify-content: center;
  }
  .chart {
    width: 100%;
    height: 100%;
    max-width: 400px;
    max-height: 400px !important;
    overflow: hidden;
    display: flex;
    justify-content: center;
    z-index: 1;
    .chart_dom {
      width: 100%;
      height: 100%;
    }
    .box {
      padding-bottom: 20px;
    }
  }
  .li {
    text-align: center;
  }
}
